<template>
  <div>
    <div class="center-container">
      <h2 class="text-center">{{user.nickname}},您好!</h2>
      <h3 class="text-normal"> 您的刷题总数:{{user.solveNums}}</h3>
      <h3 class="text-normal"> 您的正确率:{{user.correctRate}}</h3>
      <h3 class="text-normal"> 您已超过了{{user.defeatRate}}%的人</h3>
      <el-button @click="edit">点击修改个人信息</el-button>
    </div>

    <el-dialog v-model="showEditModal" title="编辑用户信息" style="width: 500px">
      <el-form :model="user" label-width="120px">
        <el-form-item label="昵称">user.nickname</el-form-item>
        <el-form-item label="手机号">user.nickname</el-form-item>
        <el-form-item label="头像">user.nickname</el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "User",
  data(){
    return {
      user: {
        nickname: '',
        solveNums: 0,
        correctRate: 0,
        defeatRate: 0,
      },
      showEditModal:false,
      userId: 1,
    }
  },
  created() {
    this.log();
    this.fetchUserState()
  },
  methods:{
    log(){
      this.$message({
          type: "error",
          message: "功能开发中!"
      })
    },
    edit(){
      this.showEditModal=true
    },
    fetchUserState(){
      axios.get(`/api/user/getState/${this.userId}`).then(res =>{
        // this.user=res.data.data
        // console.log(res)
        // console.log(res.data.data.nickName)
        this.user.nickname=res.data.data.nickName;
        this.user.solveNums=res.data.data.solveNums;
        this.user.correctRate=res.data.data.correctRate;
        this.user.defeatRate=res.data.data.defeatRate;
      })
    },
  }
}
</script>

<style scoped>
.center-container {
  align-items: center;
  margin-left: 500px;
  margin-top: 20px;
}
.text-center{
  text-align: center;
}
.text-normal{
  font-weight: normal;
}

</style>